import React, { Component } from 'react'
import '@/components/UserInfo.scss'
import PropTypes from 'prop-types'
/*
  props默认值的设置，有两种方式
  1、类名.defaultProps={key:默认值}
  2、使用静态方法
  react验证的使用步骤
  1、下载prop-types
  2、可以使用两种写法中任意一种来完成编写
  (1) 类名.propTypes={key:约束} 
 （2) static propTypes={key:约束}
*/
export default class UserInfo2 extends Component {

  static defaultProps={
    // title:'未知标题',
    name:'暂无姓名',
    age:0,
    sex:1,
    hobby:['暂无兴趣'],
    avatar:'https://gd-hbimg.huaban.com/3d08684c78c6bef02339f8be1ba7e1d64f6dcfd828ba-nTzqqR_fw658'
  }
  static propTypes={
    title:PropTypes.string.isRequired,
    name:PropTypes.string.isRequired,
    age:PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number
    ]),
    gender:PropTypes.oneOf([1,2]),
    hobby:PropTypes.array,
    isMarried:PropTypes.bool,
    school:PropTypes.object,
    email:function(props,propName,componentName){
      const rule = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if(!rule.test(props[propName])){
        throw new Error('邮箱格式有误')
      }
    }
  }
  
  render() {
    const {title,name,age,gender,hobby,avatar,isMarried,school,email}=this.props
    return (
      <div className='box'>
        <h1>{title}</h1>
        <div>姓名:{name}</div>
        <div>年龄:{age}</div>
        <div>性别:{gender===1?'男':'女'}</div>
        <div>兴趣爱好:{hobby}</div>
        <div>婚否:{isMarried?"是":'否'}</div>
        <div>学校:{school.name}</div>
        <div>邮箱:{email}</div>
        <div>
          <img src={avatar} alt={name} className='avatar' />
        </div>
      </div>
    )
  }
}

// UserInfo2.defaultProps={
//   title:'未知标题',
//   name:'暂无姓名',
//   age:0,
//   sex:1,
//   hobby:['暂无兴趣'],
//   avatar:'https://gd-hbimg.huaban.com/3d08684c78c6bef02339f8be1ba7e1d64f6dcfd828ba-nTzqqR_fw658'
// }


